<template>
  <section class="home">
    <Header :leftArrow="false" :search="false" title="首页"/>
    <div class="home-content-wrapper">
      <div class="home-content">
        <!--首页导航-->
        <nav class="home-nav">
          <van-swipe :autoplay="3000" :stop-propagation="false" class="my-swipe" indicator-color="#1989fa">
            <van-swipe-item v-for="(item, index) in carouselDatas" :key="index">
              <img v-lazy="item.carouselUrl" @click.stop="jump('/regulations-details',item.id)">
            </van-swipe-item>
          </van-swipe>
        </nav>
        <!--首页新闻-->
        <div class="home-news">
          <van-tabs v-model="activeName" color="#2EA6F2" sticky swipeable animated>
            <van-tab
              v-for="(item, index) in tabsName"
              ref="tabs"
              :key="index"
              :name="item.tabNameActive"
              :title="item.tabName"
            >
              <van-pull-refresh v-model="list[index].refreshing" @refresh="onRefresh(index)">
                <van-list
                  v-model="list[index].loading"
                  :finished="list[index].finished"
                  :error.sync="list[index].error"
                  error-text="请求失败，点击重新加载"
                  finished-text="没有更多了"
                  style="marginBottom: 50px"
                  @load="onLoad(index)"
                >
                  <ListItem v-for="(item,i) in list[index].items" :key="i" :list="item"/>
                </van-list>
              </van-pull-refresh>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { getHotPolicys, getNewestPolicys, getCarousel } from '../../api/article'

import Header from '../../components/Header/NoLeftArrowHeader'
import ListItem from '../../components/ListItem/ListItem'

export default {
  name: 'Home',
  components: {
    Header,
    ListItem,
    getCarousel
  },
  data() {
    return {
      tabsName: [
        {
          tabName: '热门',
          tabNameActive: 'hot'
        },
        {
          tabName: '最新',
          tabNameActive: 'newest'
        }
      ],
      activeName: 'hot', // hot:热门 newest:最新
      list: [
        {
          items: [],
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          page: 1, // 分页
          rows: 10 // 每页条数
        },
        {
          items: [],
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          page: 1, // 分页
          rows: 10 // 每页条数
        }
      ],
      images: [
        require('./images/20201219155327_3914.jpg'),
        require('./images/20201226203405_4775.jpg'),
        require('./images/20201226203751_9795.jpg')
      ],
      carouselDatas: []
    }
  },
  mounted() {
    this.fetchCarousel()
  },
  methods: {
    onRefresh(index) {
      // Object.assign(this.$data, this.$options.data())
      // 清空列表数据
      this.list[index].finished = false
      this.list[index].page = 1				// 分页数赋值为1
      this.list[index].items = []				// 清空数组
      this.onLoad(index)
    },
    onLoad(index) {
      this.fetchData(index)
      this.list[index].page++
    },

    async fetchData(index) {
      const list = this.list[index]
      list.loading = true

      if (list.refreshing) {
        list.items = []
        list.refreshing = false
      }

      const { page, rows } = list

      const requestPath = this.activeName === 'hot' ? getHotPolicys : getNewestPolicys

      const { code, data } = await requestPath({ code: '', page, rows })

      if (code === 0) {
        list.items.push(...data.records)
        // 加载状态结束
        if (list.error) {
          list.error = false
        }
        list.loading = false
        list.refreshing = false
        // 如果list长度大于等于总数据条数,数据全部加载完成
        if (list.items.length >= data.total) {
          list.finished = true
        }
      } else {
        // 加载状态结束
        list.loading = false
        list.error = true
        list.page = 0
      }
    },

    async fetchCarousel() {
      const { code, data } = await getCarousel()
      if (code === 0) {
        this.carouselDatas.push(...data)
      }
    },

    jump(path, id) {
      this.$router.push({ path, query: { id }})
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.home {
  width: 100%;

  .home-content-wrapper {
    position: relative;
    top: 46px;

    .home-content {
      height: 100%;

      .my-swipe {
        /deep/ .van-swipe-item {
          height: 120px;
          overflow: hidden;

          img {
            width: 100%;
            height: 120px;
            display: block;
          }
        }
      }

      /deep/ .van-tabs {
        //margin-bottom: 50px;
        .van-sticky {
          height: 46px;
        }
      }

    }
  }
}
</style>

